<template>

  <div>
    <el-button type="primary" style="margin-left: 1100px" @click="printAllPapers">导出 pdf</el-button>

    <div class="print-area">
    <!-- 第一个试卷框 -->
    <div class="paper-border"  contenteditable="true" @blur="saveExamInfo">
      <div class="my_header">
        天津大学试卷专用纸 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重修生的任课教师姓名<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>
      </div>
      <div class="my_baseInf">
        学院<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>专业<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u> <u>&nbsp;&nbsp;&nbsp;</u>班  &nbsp;&nbsp;&nbsp;&nbsp;年级<u>&nbsp;&nbsp;&nbsp;&nbsp;</u>学号<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>姓名<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>  &nbsp;&nbsp;共3页 第1页
      </div>
      <div class="my_examInf"
           contenteditable="true"
          @blur="saveExamInfo" >
  &nbsp;&nbsp;2025～2026学年第一学期期末考试试卷 <br>
  &nbsp;&nbsp;&nbsp;《高等数学2A》（ A卷，共3页）      <br>
  （考试时间：2025年6月20日, 14:00-16:00）
</div>
      <table contenteditable="true"
      @blur="saveExamInfo">
        <tr>
          <th>题号</th>
          <th>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>成绩</th>
          <th>核分人签字</th>
        </tr>
        <tr>
          <td>满分</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td rowspan="2"></td>
        </tr>
        <tr>
          <td>得分</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>

       <!-- {{ titleItems }} -->
       <div :key="index"  v-for="(titleItem,index) in titleItems">
          <div :key="questionIndex"
          v-for="(questionItem,questionIndex) in titleItem.questionItems">
          <QuestionShow :qType="questionItem.questionType" :question="questionItem" :questionIndex="questionIndex+1"/>
          </div>
        </div>
        <!-- <QuestionShow :qType="question.questionType" :question="question"/> -->
    </div>
    <div class="page-break"></div>
    <!-- 第二个试卷框 -->
    <div class="paper-border"  contenteditable="true" @blur="saveExamInfo">
      <div class="my_header">
        天津大学试卷专用纸
      </div>
      <div class="my_baseInf">
        学院<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>专业<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u> <u>&nbsp;&nbsp;&nbsp;</u>班  &nbsp;&nbsp;&nbsp;&nbsp;年级<u>&nbsp;&nbsp;&nbsp;&nbsp;</u>学号<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>姓名<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>  &nbsp;&nbsp;共3页 第2页
      </div>
      <div></div>

    </div>
    <div class="page-break"></div>
    <!-- 第三个试卷框 -->
    <div class="paper-border" contenteditable="true" @blur="saveExamInfo">
      <div class="my_header">
        天津大学试卷专用纸
      </div>
      <div class="my_baseInf">
        学院<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>专业<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u> <u>&nbsp;&nbsp;&nbsp;</u>班  &nbsp;&nbsp;&nbsp;&nbsp;年级<u>&nbsp;&nbsp;&nbsp;&nbsp;</u>学号<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>姓名<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>  &nbsp;&nbsp;共3页 第3页
      </div>
      <div></div>
    </div>
    </div>
  </div>
</template>

<script>
import QuestionShow from '../question/components/Show1'

export default {
  inject: ['titleItems'],
  components: { QuestionShow },
  data () {
    return {
      activeIndex: 0,
      titleItems: [],
      question: {
        id: 14,
        questionType: 5,
        subjectId: 2,
        title: '<p>将极限表示成定积分&nbsp;<img src="https://r.latexeasy.com/image.svg?%5Clim_%7Bx%20%5Cto%20%5Cinfty%7D(%5Csin%5Cfrac%7B%5Cpi%7D%7Bn%7D%2B%5Csin%5Cfrac%7B2%5Cpi%7D%7Bn%7D%2B...%2B%20%5Csin%5Cfrac%7Bn%5Cpi%7D%7Bn%7D)" data-formula-image="%5Clim_%7Bx%20%5Cto%20%5Cinfty%7D(%5Csin%5Cfrac%7B%5Cpi%7D%7Bn%7D%2B%5Csin%5Cfrac%7B2%5Cpi%7D%7Bn%7D%2B...%2B%20%5Csin%5Cfrac%7Bn%5Cpi%7D%7Bn%7D)" /></p>',
        gradeLevel: 0,
        items: [],
        analyze: '<p>1<br/></p>',
        correctArray: null,
        correct: '',
        score: 4,
        difficult: 3,
        itemOrder: 2
      }
    }
  },
  created () {
    if (this.$route.query.titleItems) {
      this.titleItems = JSON.parse(this.$route.query.titleItems)
    }
  },
  methods: {
    saveExamInfo (event) {
      // 获取编辑后的内容
      this.examInfo = event.target.innerHTML
    },
    printAllPapers () {
      // 隐藏导出按钮（可选）
      const exportButton = document.querySelector('el-button[type="primary"]')
      if (exportButton) {
        exportButton.style.display = 'none'
      }
      const fixedHeader = document.querySelector('.fixed-header')
      if (fixedHeader) {
        fixedHeader.style.display = 'none'
      }
      const sidebar = document.querySelector('.sidebar-logo-container.collapse')
      if (sidebar) {
        sidebar.style.display = 'none'
      }
      const scrollbar = document.querySelector('.el-scrollbar')
      if (scrollbar) {
        scrollbar.style.display = 'none'
      }

      // 触发打印
      window.print()

      fixedHeader.style.display = ''
      sidebar.style.display = ''
      scrollbar.style.display = ''
      // 恢复导出按钮（可选）
      exportButton.style.display = ''
    }
  }

}
</script>

<style scoped>
/* 打印样式（仅在打印时生效） */
@media print {
  /* 隐藏不需要打印的元素 */
  el-button[type="primary"] {
    display: none !important;
  }
  /* 设置打印区域为横向 A4 */
  @page {
    size: landscape ; /* 横向  */
    margin: 10mm; /* 调整页边距 */
  }

   /* 确保试卷框适应打印区域 */
   .print-area {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    margin: 0 auto; /* 水平居中 */
    margin-top: -120px;
    margin-left: -1.5px;
    width: 100%; /* 确保宽度适应纸张 */
    max-width: 250mm; /* A4 宽度 */
  }

  .paper-border {
    border: 1px solid black;
    box-sizing: border-box;
    width: 100%; /* 确保宽度适应纸张 */
    max-width: 250mm; /* A4 宽度 */
    height: 160mm;
    margin: 0 auto; /* 水平居中 */
    font-family: "宋体", SimSun, serif !important;
  }
  .my_examInf {
    font-family: "黑体", SimHei, sans-serif !important;
  }
}
/* 样式部分 */
body {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  margin: 0;
}
.page-break {
    /* page-break-before: always; */
    height: 15px;
}
/* 黑框 */
.paper-border {
  position: relative;
  width: 250mm;
  height: 160mm;
  border: 2px solid black; /* 边框宽度为2px，样式为实线，颜色为黑色 */
  display: flex;
  /* align-items: flex-start; 左对齐 */
  margin: 0 auto;     /*水平方向 */
  margin-top: 90px;
  font-family: "宋体", SimSun, serif !important;
}

.my_header {
  position: absolute; /* 绝对定位 */
  top: -60px; /* 距离顶部  */
  left: 40%; /* 距离左侧  */
  font-size: 15px;
}

.my_baseInf {
  position: absolute; /* 绝对定位 */
  top: -25px; /* 距离顶部 0 */
  left: 0%; /* 距离左侧 0 */
  font-size: 15px;
  font-weight: bold;
}

.my_examInf {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 距离顶部 0 */
  left: 60px; /* 距离左侧 0 */
  font-size: 14px;
  font-family: "黑体", SimHei, sans-serif !important;
  font-weight: bold;
  line-height: 2;
}

/* 表格样式 */
table {
  position: absolute; /* 绝对定位 */
  top: 100px; /* 距离顶部 0 */
  left: 20px; /* 距离左侧 0 */
  font-size: 12px;
  font-style: normal;
  border-collapse: collapse; /* 合并边框 */
  width: 350px; /* 表格宽度为div的80% */
  height: 50px;
}

th, td {
  border: 0.5px solid black; /* 单元格边框 */
  padding: 8px; /* 单元格内边距 */
  text-align: center; /* 文本居中 */
}
</style>
